<template>
    <div class="cotainer">
        <div style="float: left;width: 200px">
            <el-aside width="200px">
                <!--机构-->
                <template>
                    <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </template>
            </el-aside>
        </div>
        <div style="float: left;">
        <!--<div style="width: 100%">
                 <div style="width: 300px;float: left;">
                    <el-input v-model="username" placeholder="用户名"></el-input>
                </div>
                 <div style="width: 300px;margin-top: 2px;margin-left: 310px;">
                    <el-input v-model="name" placeholder="姓名"></el-input>
                </div>
                <div style="margin-top: -40px;margin-left: 620px;">
                    <el-button type="primary" @click="inquire">搜索</el-button>
                </div>
                <div style="margin-top: -40px;margin-left: 800px;">
                    <el-button type="success" @click="add">创建用户</el-button>
                </div >
            </div> -->

            <div>
                <el-form :inline="true" :model="scform" class="demo-form-inline">
                    <el-form-item>
                        <el-input clearable v-model="scform.username" style="width: 300px" placeholder="用户名"></el-input>
                        <el-input clearable v-model="scform.name" style="width: 300px;margin-left: 10px" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="inquire">搜索</el-button>
                        <el-button style="margin-left: 110px;" type="success" @click="add">创建用户</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- <div style="margin-top: -40px;margin-left: 800px;">
                <el-button type="success" @click="add">创建用户</el-button>
            </div > -->
            <div style="width: 100%;margin-top: 20px">
                <div >
                    <!-- 用户列表-->
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="login_name"
                                label="用户名"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                align="center">
                        </el-table-column>
                        <!--   <el-table-column
                                  prop="rolenames"
                                  label="角色"
                                  align="center">
                          </el-table-column> -->
                        <el-table-column
                                prop="create_time"
                                label="创建时间"
                                align="center"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center"
                                width="200">
                            <template slot-scope="scope">
                                <el-button
                                        type="success"
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        type="danger"
                                        size="mini"
                                        @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNo"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalRecord" class="text-center mt10">
                    </el-pagination>

                </div>
            </div>





        </div>
        <!--添加角色弹出框-->
        <el-dialog title="人员" :visible.sync="addUserVisible" width="650px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px"
                     class="demo-ruleForm">
                <el-form-item label="账号：" prop="login_name">
                    <div style="width: 320px"><el-input v-model="ruleForm.login_name"></el-input></div>
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <div style="width: 320px"><el-input v-model="ruleForm.name"></el-input></div>
                </el-form-item>
                <el-form-item label="电话：" prop="mobile">
                    <div style="width: 320px"><el-input v-model="ruleForm.mobile"></el-input></div>
                </el-form-item>
                <el-form-item label="过期时间：" >
                    <div style="width: 320px"><el-date-picker type="date" placeholder="选择日期" v-model="period_end_time" style="width: 100%;"></el-date-picker></div>
                </el-form-item>
                <!--  <el-form-item label="角色：" prop="role">
                     <el-checkbox-group v-model="form">
                         <el-checkbox v-for="item in updateroleList" :key=item.role_id
                                      :label=item.role_id>
                             {{item.role_name}}
                         </el-checkbox>
                     </el-checkbox-group>
                 </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="no">取 消</el-button>
                <el-button type="primary" @click="yes">确 定</el-button>
            </div>
        </el-dialog>
        <!--修改角色弹出框-->
        <el-dialog title="人员" :visible.sync="updateVisible">
            <el-form :model="updateForm" :rules="updaterules" ref="updateForm" label-width="180px"
                     class="demo-ruleForm">
                <el-form-item label="账号：" prop="login_name">
                    <div style="width: 320px"><el-input v-model="updateForm.login_name" readonly></el-input></div>
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <div style="width: 320px"><el-input v-model="updateForm.name"></el-input></div>
                </el-form-item>
                <el-form-item label="电话：" prop="mobile">
                    <div style="width: 320px"><el-input v-model="updateForm.mobile"></el-input></div>
                </el-form-item>
                <el-form-item label="过期时间：">
                    <div style="width: 320px"><el-date-picker type="date" placeholder="选择日期" v-model="update_time" style="width: 100%;"></el-date-picker></div>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="determine">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {

                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                update_time:'',
                treeData: [],//用户数据
                defaultProps: {
                    children: 'children',
                    label: 'name',
                },
                treeList: [],//机构数据
                rules: {   //验证
                    login_name: [
                        {required: true, message: '请输入账号名称', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    mobile: [
                        {validator: checkPhone, trigger: 'blur',required: true}
                    ],

                },
                updaterules: {   //修改时的验证
                    login_name: [
                        {required: true, message: '请输入账号名称', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    mobile:  [
                        {validator: checkPhone, trigger: 'blur',required: true}
                    ],

                },
                period_end_time:'',//过期时间
                addUserVisible: false,//添加用户弹出框
                updateVisible: false,//修改用户弹出框
                formLabelWidth: '120px',
                form: [],
                updateform: [],
                ruleForm: {},
                updateForm: {
                    login_name:'',
                    name:'',
                    mobile:''
                },
                scform:{
                    username: '',
                    name: ''
                },

                updaterole: '',
                tableData: [],
                updateroleList: [],
                id: '',
                dataid:'',
                jgid:'',
            }

        },



        methods: {

            //分页
            async handleSizeChange(val) {
                this.pageSize = val;
                /*this.init();*/
                console.log('val1',val)
                this.getTreeList();
            },
            async handleCurrentChange(val) {
                this.pageNo = val;
                console.log('val2',val)
                /*this.init();*/
                this.getTreeList();
            },


            /*用户添加功能*/
            async add() {

                this.addUserVisible = true
            },
            /*初始化用户列表，角色列表*/
            //async init() {
            /*const roleRes = await this.$http('roleList', {})
            this.updateroleList = roleRes
            console.log(this.updateroleList)*/
            /*const res = await this.$http('userList', {
                grid_id: this.jgid,
            });

            this.tableData = res.results
            console.log('bbbbbbbbb',res.results)
            console.log('aaaaaaaaa',res)*/

            //},
            
            /*点击确定创建用户*/
            async yes() {
                this.addUserVisible = false
                // this.ruleForm.login_name = ''
                // this.ruleForm.name = ''
                // this.ruleForm.mobile = ''
                /*this.updaterole = this.form.join(',')*/
                var timestamp = this.period_end_time;
                var d = new Date(timestamp);    //根据时间戳生成的时间对象
                var date = (d.getFullYear()) + "-" +
                    (d.getMonth() + 1) + "-" +
                    (d.getDate())
                this.period_end_time = date

                const res = await this.$http('createUser', {
                    rolelist : 'zz',
                    login_name: this.ruleForm.login_name,
                    name: this.ruleForm.name,
                    mobile: this.ruleForm.mobile,
                    rolelist: this.updaterole,
                    period_end_time:this.period_end_time,
                    grid_id: this.dataid
                })
                if (res === 'chenggong') {
                    this.$message({
                        message: '创建成功',
                        type: 'success'
                    });
                    this.getTreeList();
                } else {
                    this.$message({
                        message: '创建失败',
                        type: 'error'
                    });
                }
                this.getTreeList();
            },
            async no() { //取消添加
                this.ruleForm.login_name = ''
                this.ruleForm.name = ''
                this.ruleForm.mobile = ''
                this.addUserVisible = false
            },
            /*修改功能*/
            async handleEdit(index, row) {
                console.log('row',row)
                console.log('time',row.period_end_time)
                if (row.period_end_time == undefined) {
                    this.update_time = ''
                }else{
                    var timestamp = row.period_end_time;
                    var d = new Date(timestamp);    //根据时间戳生成的时间对象
                    var date = (d.getFullYear()) + "-" +
                        (d.getMonth() + 1) + "-" +
                        (d.getDate())
                    this.update_time = date  
                }
                
                this.updateForm = row
                this.id = row.id
                /* this.updateform = row.rolelist.split(',');*/
                this.updateVisible = true
            },
            /*确认修改，点击修改用户*/
            async determine() {
                this.updateVisible = false
                var timestamp = this.update_time;
                var d = new Date(timestamp);    //根据时间戳生成的时间对象
                var date = (d.getFullYear()) + "-" +
                    (d.getMonth() + 1) + "-" +
                    (d.getDate())
                this.update_time = date
                /*this.updaterole = this.updateform.join(',')*/
                const res = await this.$http('createUser', {
                    //rolelist: this.updaterole,
                    id: this.id,
                    mobile:this.updateForm.mobile,
                    name: this.updateForm.name,
                    period_end_time:this.update_time
                });
                if (res === 'chenggong') {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.getTreeList();
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                }
            },
            async cancel() {  //取消
                this.updateVisible = false
            },
            /*删除用户*/
            async handleDelete(index, row) {

                this.$confirm('将永久删除该用户, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http('deleteUser', {
                        id: row
                    });
                    this.getTreeList();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /*查询用户数据*/
            async inquire() {
                const res = await this.$http('userList', {
                    login_name: this.scform.username,
                    name: this.scform.name
                    //grid_id: 1
                });
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;

            },
            async handleNodeClick(data) {
                console.log('data',data)
                this.dataid = data.id
                const res = await this.$http('userList', {
                    grid_id: data.id,
                });
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            /*初始化机构列表*/
            async getTreeList() {
                const res = await this.$http('downmechanism', {});
                console.log('down',res)

                this.treeData = this.$util.transData(res, 'id', 'parent_id', 'children');
                console.log(this.treeData)
                this.jgid = this.treeData[0].id
                const res1 = await this.$http('userList', {
                    grid_id: this.jgid,
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                });
                this.tableData = res1.results
                console.log('res1',res1)
                this.totalPage = res1.totalPage;
                this.totalRecord = res1.totalRecord;
            },

        },

        watch: {},

        mounted() {
            /*this.init();*/
            this.getTreeList();
        },

    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;

    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .cotainer {
        /*border: 1px solid black;*/
        /*background-color: #0f4051;*/
        /*margin-left: -200px;*/
    }

</style>
